/* OrderCard.css */
.order-card {
  display: flex;
  align-items: flex-start; /* 使内容顶部对齐 */
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 16px;
  position: relative; /* 为绝对定位的按钮提供参考 */
  transition: box-shadow 0.3s;
  background-color: #fff; /* 保持背景为白色 */
}

.order-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100px;
  height: auto;
  border-radius: 8px;
  margin-right: 16px; /* 图片与文本之间的间距 */
}

.order-details {
  flex-grow: 1; /* 使文本部分占据剩余空间 */
}

.product-name {
  font-size: 1.2em;
  margin: 0;
}

.order-status {
  margin: 10px 0;
}

.product-price {
  color: #333;
  margin: 10px 0; /* 添加上下间距 */
}

.order-actions {
  position: absolute; /* 绝对定位按钮 */
  bottom: 16px; /* 距离底部的距离 */
  right: 16px; /* 距离右侧的距离 */
}

.remind-button,
.confirm-button,
.refuse-button {
  margin-right: 0.5em;
  border-radius: 4px; /* 按钮边角圆润 */
  border-width: 1px; /* 边框宽度 */
  background-color: #fff; /* 背景为白色 */
  color: inherit; /* 继承文本颜色 */
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.remind-button {
  border-color: #1a73e8; /* 深蓝色边框 */
}

.confirm-button {
  border-color: #52c41a; /* 绿色边框 */
}

.refuse-button {
  border-color: #ff4d4f; /* 红色边框 */
}

/* 悬停效果 */
.remind-button:hover {
  background-color: #1a73e8; /* 深蓝色背景 */
  color: white; /* 文字变为白色 */
}

.confirm-button:hover {
  background-color: #52c41a; /* 绿色背景 */
  color: white; /* 文字变为白色 */
}

.refuse-button:hover {
  background-color: #ff4d4f; /* 红色背景 */
  color: white; /* 文字变为白色 */
}
